<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仓库货架维护</title>

		<link rel="stylesheet" href="../css/index.css">

		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 90%;
				text-align: center;
			}
		</style>

	</head>
	<body>
		<div id="app">
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="输入货架名">
						<el-input v-model="formInline.shelves" placeholder="输入货架名"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmitC">查询</el-button>
						<el-button type="warning" @click="open">增加货架</el-button>
					</el-form-item>
				</el-form>
			</fieldset>

			<el-table :data="shelvesData" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}">
				<el-table-column prop="shelves" label="货架名" width="200">
				</el-table-column>


				<el-table-column prop="warehouse" label="所属仓库" width="200">
				</el-table-column>
				<el-table-column prop="area" label="所属区" width="200">
				</el-table-column>


				<el-table-column prop="remarks" label="备注" width="380">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="danger">删除</el-button>
						<el-button size="mini" @click="handleEditup(scope.$index, scope.row)"
							type="primary">修改</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>

			<!--增加货架开始-->
			<el-dialog title="增加货架" :visible.sync="dialogVisible" width="50%">

				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="货架名字">
						<el-input v-model="sizeForm.shelves"></el-input>
					</el-form-item>
					<el-form-item label="所属区">
						<el-select v-model="sizeForm.areaid" filterable placeholder="请选择所属区">
							<el-option v-for="item in parentidoptions" :key="item.aid" :label="item.area"
								:value="item.aid">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="sizeForm.remarks"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false" type="danger">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit" type="primary">确 定</el-button>
				</span>
			</el-dialog>
			<!--增加货架结束-->

			<!-- 修改货架开始 -->
			<el-dialog title="修改货架信息" :visible.sync="dialogVisible1" width="50%">
				<el-form ref="form1" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="货架名字" prop="shelves">
						<el-input v-model="sizeForm.shelves"></el-input>
					</el-form-item>
					<el-form-item label="所属仓库区">
						<el-select v-model="sizeForm.areaid" filterable placeholder="请选择所属仓库区">
							<el-option v-for="item in parentidoptions" :key="item.aid" :label="item.area"
								:value="item.aid">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
						<el-input v-model="sizeForm.remarks"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible1 = false" type="danger">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit1" type="primary">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 修改货架结束 -->

		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					shelvesData: [],
					formInline: {
						shelves: ''
					},
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5, //每页条数

					dialogVisible: false,
					dialogVisible1: false,
					//信息查询
					sizeForm: {
						shelves: '', //货架名字
						warehouse: '', //仓库
						area: '', //仓库区
						remarks: '' //备注
					},
					//编辑信息
					sizeForm1: {
						shelves: '',
						warehouse: '',
						area: '',
						remarks: ''
					},
					parentidoptions: [] //货架菜单下拉列表原始值
				},
				methods: {


					onSubmit() { //增加货架

						//执行业务提交
						this.dialogVisible = false
						var that = this
						//alert(JSON.stringify(this.sizeForm))
						axios.post(HTTP + "shelves/addShelves", this.sizeForm).then(function(res) {
							if (res.data.code == 200) {
								that.$message('增加仓库区成功')
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});

					},

					onSubmit1() { //提交修改数据
						this.$confirm('确定修改该货架信息?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							this.dialogVisible1 = false
							var that = this
							//alert(JSON.stringify(this.sizeForm))
							axios.post(HTTP + "shelves/upShelves", this.sizeForm).then(function(res) {
								if (res.data.code == 200) {
									that.$message('修改成功')
									that.initdata()
								}
							}).catch(err => {
								console.log(err)
							});
						})
					},

					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},

					handleEdit(index, row) { //删除
						this.$confirm('此操作将永久删除该货架, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							console.log(index, row);
							var that = this
							axios.post(HTTP + "shelves/delShelves", {
								"id": row.id
							}).then(function(res) {
								if (res.data.code == 200) {
									that.$message('删除成功')
									that.initdata()
								}
							}).catch(err => {
								console.log(err)
							});
						})
					},

					// handleEdit(index, row) { //删除
					// 	console.log(index, row);
					// 	var that = this
					// 	// this.$confirm('确认删除？')

					// 	axios.post(HTTP + "shelves/delShelves", {
					// 		"id": row.id
					// 	}).then(function(res) {
					// 		if (res.data.code == 200) {
					// 			that.$message('删除成功')
					// 			that.initdata()
					// 		}
					// 	}).catch(err => {
					// 		console.log(err)
					// 	});
					// },
					handleEditup(index, row) { //查询需要修改的数据
						console.log(index, row.id);
						this.dialogVisible1 = true
						this.getParentMent()
						var that = this
						axios.post(HTTP + "shelves/seloneid", {
							"id": row.id
						}).then(function(res) {
							// alert(JSON.stringify(res));
							that.sizeForm = res.data.data.oneid
						}).catch(err => {
							console.log(err)
						});
					},

					onSubmitC() { //按条件查询

						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post(HTTP + "shelves/shelvesSelect", this.formInline).then(function(res) {
							//	alert(JSON.stringify(res));
							that.shelvesData = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					open() {
						this.dialogVisible = true
						//加载所属仓库区数据
						this.getParentMent()
					},
					getParentMent() {
						var that = this
						//获取所属父菜单数据
						axios.post(HTTP + "warehouse/materialall", {
							"id": 0
						}).then(function(res) {
							// alert(JSON.stringify(res));
							that.parentidoptions = res.data.data.list

						}).catch(err => {
							console.log(err)
						});
					},

					initdata() { //初始化
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "shelves/selecthelves/" + this.page).then(function(res) {
							// alert(JSON.stringify(res));
							that.shelvesData = res.data.data.pageInfoA.list
							that.tocal = res.data.data.pageInfoA.total

						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()

				}
			})
		</script>
	</body>
</html>